<script setup lang="ts">
import LoginLayout from '@/components/login-layout.vue'

import AdminAccountLoginForm from './admin-account-login-form.vue'

const { push } = useRouter()

function goToNormal() {
    push('/login')
}
</script>

<template>
    <LoginLayout>
        <div class="admin-login-form">
            <div class="absolute size-80 cursor-pointer right-0 top-0"
                 @click="goToNormal"
            >
                <div class="b-l-80 b-t-80 b-transparent b-t-red b-solid absolute size-0 z-0" />

                <div class="text-14 text-white font-500 flex flex-col absolute right-10 top-10 z-100">
                    <span class="lh-12">商户</span>

                    <span>登录</span>
                </div>
            </div>

            <div class="form-container">
                <div class="mx-auto text-20 text-red flex flex flex-col items-center">
                    <span>欢迎回来，运营官</span>
                </div>

                <div class="form-content">
                    <AdminAccountLoginForm />
                </div>
            </div>
        </div>
    </LoginLayout>
</template>

<style lang="scss" scoped>
@function toVw($px) {
    @return #{calc(#{$px} * 100 / 1920 * 1vw)};
}
@function toVh($px) {
    @return #{calc(#{$px} * 100 / 1080 * 1vh)};
}

.admin-login-form {
    width: toVw(480);
    // height: toVh(588);
    background: #fff;
    margin-left: toVw(174);
    // margin-top: toVh(128);
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: toVh(60);
    .form-container {
        width: calc(100% - toVw(120));
        margin-top: toVh(60);
        .form-content {
            margin-top: toVh(30);
            .register {
                text-align: center;
                font-size: 14px;
                color: #767676;
                margin-top: toVh(16);
                span {
                    color: #da0004;
                    cursor: pointer;
                }
            }
        }
    }
}
</style>
